<script>
import axios from "axios";

export default {
  name: "FriendMusic",
  props:["id"],
  data() {
    return {
      music_list: [],
      loading: false
    }
  },
  methods: {
    cutSong(e, item) {
      let music = document.getElementById('music2')
      if (e.target.classList.contains("el-icon-video-play")) {
        e.target.classList.remove("el-icon-video-play")
        e.target.classList.add("el-icon-video-pause")
        music.pause()
        music.src = item.url
        this.$nextTick(() => {
          music.play()
          let title = document.getElementsByClassName("scrollText")[0]
          if (document.getElementsByClassName("f_scrollText")[0].style.display !== "none") {
            document.getElementsByClassName("f_scrollText")[0].style.display = "none"
            title.style.display = ""
          }
          let img = document.getElementById('music_img');
          img.src = require('@/assets/img/24gf-pause2 (1).png')
          title.innerText = item.title
          title.style.animationPlayState = 'running'
          let bo_ing = document.getElementById("bo_ing")
          bo_ing.innerText = "正在播放:"
        })
      } else {
        e.target.classList.remove("el-icon-video-pause")
        e.target.classList.add("el-icon-video-play")
        music.pause()
        let bo_ing = document.getElementById("bo_ing")
        bo_ing.innerText = "暂停播放:"
        let img = document.getElementById('music_img')
        img.src = require('@/assets/img/24gf-play (1).png')
        let title = document.getElementsByClassName("scrollText")[0]
        title.style.animationPlayState = 'paused'

      }

    },

    getMusicList() {
      this.loading = true
      axios.get(`/api/music/list/${this.id}`)
          .then(res => {
            if (res.data.code === 0) {
              this.loading = false
              this.music_list = res.data.data
            } else {
              this.$message.warning(res.data.msg)
            }
          }).catch(err => this.$message.error(err))
    },
    copy(id) {
      axios.get(`/api/music/copy/${id}`)
          .then(res => {
            if(res.data.code === 0) {
              this.$message.success("收藏成功")
            }else {
              this.$message.warning(res.data.msg)
            }

          }).catch(err => this.$message.error(err))
    }
  },
  watch:{
    id:{
      immediate:true,
      handler(value) {
        if(value !== '') {
          this.getMusicList()
        }
      }
    }
  },
}
</script>

<template>
  <div v-loading="loading">
    <div class="ttt_top">歌曲列表</div>
    <h1 v-show="music_list.length === 0" style="margin-left: 20px;color: #cdcdcd">空空如也</h1>

    <div :class="index%2===0?'item2':'item1'"
         v-for="(item,index) in music_list" :key="index">
      <div style="width: 50px;text-align: center;color: #409EFF">
        <span v-if="item.index === 1">默认</span>
      </div>
      <span class="index">{{ index + 1 }}</span>
      <i class="el-icon-video-play" @click="cutSong($event,item)"></i>
      <div class="music_title">
        <span>{{ item.title }}</span>
        <input class="music_input" type="text"
               value="">
      </div>
      <div class="hide">

        <i class="el-icon-folder-add" @click="copy(item.id)"></i>
      </div>
    </div>
  </div>

</template>

<style scoped>
.ttt_top {
  background-image: linear-gradient(to bottom, transparent, #dbdbdb);
  height: 40px;
  border-bottom: 2px solid #ffffff;
  text-align: center;
  font-size: 20px;
  line-height: 40px;
  align-items: center;
}

.item1, .item2 {
  height: 40px;
  display: flex;
  align-items: center;

}

.music_title {
  margin-left: 20px;
  width: 600px;
  overflow: hidden;
}

.music_input {
  display: none;
  width: 580px;
  height: 30px;
}

.hide {
  margin-left: 40px;
}

.el-icon-delete:hover {
  color: #f44336;
}

.el-icon-video-play:hover {
  color: #409EFF;
}

.el-icon-headset:hover {
  color: #409EFF;
}

.el-icon-edit-outline:hover {
  color: #409EFF;
}

.el-icon-video-pause:hover {
  color: #409EFF;
}

.el-icon-folder-add:hover {
  color: #409EFF;
}

.el-icon-circle-check:hover {
  color: #409EFF;
}

.item1 i, .item2 i {
  font-weight: bold;
  margin-left: 20px;
  font-size: 30px;
  color: #8a8a8a;
  cursor: pointer;


}


.item1 {
  background-color: #f1f2f5;
}
</style>
}